Add ability to dock player to top or bottom of page #331
Conversation
|
@peterwilsoncc over to you for review/testing, thanks! |
There was a problem hiding this comment.
I've added a few notes inline to start with.
I think the expanding and contracting of details will need an aria-expanded and family for accessibility reasons.
I noticed in the dashboard when editing a post that a docked player is hidden behind the admin bar and post settings panels.
When the blocks are shown on the index pages of a blog/category, it's possible to dock the items from each post which can look odd, and will be problematic if there all docked to the same location.
I think it will either need to be limited so only the first episode is docked on listing pages, or docking only works on single posts.
There was a problem hiding this comment.
The new code in this file uses tabs for intending, whereas the existing code is using spaces. Are you able to switch to spaces for consistency.
| // displayEpisodeTitle || | ||
| // displayArt || |
There was a problem hiding this comment.
Please remove the commented out code.
| // displayEpisodeTitle || | |
| // displayArt || |
| // displayEpisodeTitle, | ||
| // displayArt, |
There was a problem hiding this comment.
| // displayEpisodeTitle, | |
| // displayArt, |
| ?> | ||
| <div class="wp-block-podcasting-podcast-outer"> | ||
|
|
||
| <div class="wp-block-podcasting-podcast-outer <?php echo 'docked-' . esc_attr( $attributes['isDocked'] ); ?>"> |
There was a problem hiding this comment.
Nitpick.
| <div class="wp-block-podcasting-podcast-outer <?php echo 'docked-' . esc_attr( $attributes['isDocked'] ); ?>"> | |
| <div class="wp-block-podcasting-podcast-outer <?php echo 'docked-' . sanitize_html_class( $attributes['isDocked'] ); ?>"> |
| <?php echo esc_html( $explicit ); ?> | ||
| </span> | ||
| <?php endif; ?> | ||
| <div id="podcast-details" style="display: none;"> |
There was a problem hiding this comment.
The IDs will need to be unique (use wp_unique_prefixed_id( 'podcast-details' )) to avoid duplicate IDs on index pages that contain multiple blocks.
| // If isDocked is 'none', show details by default | ||
| <?php if ( $attributes['isDocked'] === 'none' ) : ?> | ||
| detailsDiv.style.display = 'block'; | ||
| toggleButton.textContent = 'Less'; |
There was a problem hiding this comment.
| toggleButton.textContent = 'Less'; | |
| toggleButton.textContent = <?php echo wp_json_encode( __( 'Less' ) ); ?>; |
| toggleButton.addEventListener('click', function() { | ||
| if (detailsDiv.style.display === 'none') { | ||
| detailsDiv.style.display = 'block'; | ||
| toggleButton.textContent = 'Less'; |
| toggleButton.textContent = 'Less'; | ||
| } else { | ||
| detailsDiv.style.display = 'none'; | ||
| toggleButton.textContent = 'More'; |
| </div> | ||
| <div class="wp-block-podcasting-podcast__toggle-details"> | ||
| <button id="toggle-details-button">More</button> |
There was a problem hiding this comment.
As above re unique ID
Description of the Change
This PR adds the ability to dock the player to the top or bottom of the page, in addition to the original 'inline' option.
When docked, the podcast details are hidden initially to save height. A 'More/Less' button is available to hide or reveal the podcast details.
Please note: This feature is still a WIP
Further styling is still required on the 'More/Less' button and layout, and general spacing needs to be reviewed and tested.
This feature is not yet fully tested in all major browsers and viewport sizes.
Closes #299
How to test the Change
From within the WP Admin Dashboard:
Changelog Entry
Credits
@wadebekker
Checklist:
Desired results:
The designs below illustrate our goals for both mobile and desktop views. Note: When docked at the top, the player should remain visually identical but fixed to the top of the page.